<template>
    <div class="circleDetail">
         <page-header @toLastPage="toLastPage" backgroundColor='#fff'>
      <template v-slot:right>
        <van-button type="primary" size="small" style="marginTop:.4rem;height:1rem;" @click="publishCircle">发表</van-button>
      </template>
        </page-header>
        <div class="content">
            <van-field
            v-model="message"
            rows="4"
            autosize
            type="textarea"
            maxlength="500"
            placeholder="这一刻的想法..."
            />
            <div class="imgList flex">
            <van-image
            width="33%"
            height="auto"
            fit="cover"
            lazy-load
            :src="item.base64"
            v-for="(item,index) in imgList" :key="index"
            />
                <div class="addBox f-center">
               <van-uploader :max-count=9-imgLength multiple :after-read="afterRead">
                   <div class="text">
                   +
               </div>
               </van-uploader>
            </div>
            </div>
    <div v-for="(item,index) in circleList" :key="index" style="marginTop:3rem;">
        <cell-list :itemList="item" @sendEvent='sendEvent'></cell-list>
    </div>
        </div>
        <loading v-if="showLoading"></loading>
    </div>
</template>
<script>
import pageHeader from '../common/pageHeader';
import { Meteor } from 'meteor/meteor';
import { friends, image,user } from '../../../api/collections/index';
import cellList from '../common/cellList';
import loading from '../common/loading';
import upload from '../../../api/libs/upload';
export default {
    components:{
        pageHeader,
        cellList,
        loading
    },
    meteor: {
    $subscribe: {
      'userInf': [],
      'imgList': []
    },
    },
    created(){
        this.setData()
    },
    data() {
        return {
            showLoading:true,
            message:'',
            imgList:[],
            id:sessionStorage.getItem('user'),
            circleList:[
                {
                separate:false,
                moreList:[
                {
                    describe:'所在位置',
                    icon:'#icon-weizhi',
                    content:'',
                    color:'#333'
                },
                {
                    describe:'提醒谁看',
                    icon:'#icon-aite',
                    content:'',
                    color:'#333'
                },
                 {
                    describe:'谁可以看',
                    icon:'#icon-ren',
                    content:'公开',
                    color:'#333'
                }
                ]
                }
                ]
        }
    },
    computed:{
        imgLength(){
            return this.imgList.length
        }
    },
    methods:{
        setData(){
        const list = JSON.parse(sessionStorage.getItem('imgList'))
       if(list){
            list.forEach(e => {
           Meteor.call('image.find',e,(err,res) =>{
               if(err){
                   this.$toast(err.error)
               }
               else{
                   this.imgList.push(res)
                   this.showLoading = false
               }
           })
    })
       }else{
           this.showLoading = false
       }
        },
        toLastPage(){
            this.$router.go(-1)
        },
        publishCircle(){
            let list = []
            this.imgList.forEach(e => {
                list.push(e.base64)
            })
            this.afterPublish()
            Meteor.call('circleInf.create',{
                uid:this.id,
                content:this.message,
                pictures:list,
                location:'',
                like:[],
                comment:[],
                create_time:new Date().getTime()
            },(err,res)=>{
                if(err){
                    this.$toast('发布失败，请重试')
                }else{
                        this.afterPublish(res)
                }
            })
        },
        // 发布成功后
        afterPublish(e){
            if(e){
                const friendList = friends.find({F_UserID:this.id})
                if(friendList){
                    friendList.forEach(item => {
                            Meteor.call('circleStatus.create',{
                                uid:this.id,
                                cid:e,
                                fid:item.F_FriendID,
                                isRead:false,
                                create_time:new Date().getTime()
                            })
                        })
                        this.$router.push('/friendCircle')
                }
            }

        },
        // cellList点击事件
        sendEvent(e){
            switch(e){
            default:this.$notify({ type: 'success', message: '功能暂未开发',duration: 500 });break;
            }
        },
        // 上传图片
        afterRead(file) {
        if(file instanceof Array){
            this.upLoadLength = file.length
            file.forEach((e,i) => {
                upload.uploadImg(e,this.afterUpload)
            })
        }
        else{
            upload.uploadImg(file,this.afterUpload)
        } 
    },
        //上传图片成功后
    afterUpload(res){
         if(res){
            Meteor.call('image.find',res,(err,e) =>{
               if(err){
                   this.$toast(err.error)
               }
               else{
                   this.imgList.push(e)
               }
           })
         }
    }
    }
}
</script>
<style scoped>
    .content{
        margin-top: 1.5rem;
        padding: 1rem;
    }
    .circleDetail{
        background-color: #fff;
        height: 94.4vh;
    }
    .van-cell{
        padding: 0;
    }
    .imgList{
        flex-wrap: wrap;
        box-sizing: border-box;
    }
    .van-image{
        padding: .1rem;
        box-sizing: border-box;
    }
    .addBox{
        width: 33%;
        height: auto;
        min-height: 3.8rem;
        box-sizing: border-box;
        background-color: #eee;
        text-align: center;
        padding: .1rem;
    }
    .addBox .text{
        font-size: 1.5rem;
    }
</style>